<template>
	<view class="weekPlan">
		<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation>
			<view class="cu-form-group margin-top">
				<view class="title">辣度属性</view>
				<picker @change="PickerChange" :value="pickerIndex" :range="picker">
					<view class="picker">
						{{picker[pickerIndex]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">日消耗千卡</view>
				<view class="content">{{userInfo.userKcal}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">日千卡比例</view>
				<picker mode="multiSelector" @change="MultiChange" :value="multiIndex" :range="multiArray">
					<view class="picker content">
						{{multiArray[0][multiIndex[0]]}} : {{multiArray[1][multiIndex[1]]}} : {{multiArray[2][multiIndex[2]]}}
					</view>
				</picker>
			</view>
			<view class="btnsubmit" @click="btnsubmit">
				确定计划
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		hasWeek
	} from '../../util/mixins.js'
	export default {
		mixins: [hasWeek],
		data() {
			return {
				pickerIndex: 1,
				picker: ['清淡', '微辣', '中辣', '麻辣'],
				multiArray: Array(3).fill(Array(10).fill(0).map((t, i) => i + 1)),
				multiIndex: Array(3).fill(0)
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		onLoad() {
			let token = this.$db.get("token");
			if (!token) {
				this.$comm.jumpToLogin();
				return;
			}
		},
		methods: {
			PickerChange(e) {
				this.pickerIndex = e.detail.value
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			btnsubmit() {
				if (this.picker[this.pickerIndex]) {
					let arr = Array(3).fill(0).map((t, i) => this.multiArray[i][this.multiIndex[i]])
					let kcalList = arr.map((item, index) => {
						let sum = arr.reduce((a, b) => a + b)
						return {
							kcal: ((item / sum) * this.userInfo.userKcal).toFixed(2),
							type: ['breakfast', 'lunch', 'dinner'][index]
						}
					})
					this.$api.autoWeekMenu({
						userKcal: this.userInfo.userKcal,
						menuFlavor: this.picker[this.pickerIndex],
						kcalList: kcalList,
						menuList: this.$comm.getWeekData({
							listName: 'menuList'
						})
					}).then(res => {
						if (res.code) {
							this.$comm.successToShow('保存成功', () => {
								this.$comm.switchTabTo('/pages/index/index')
							})
						}
					})
				} else {
					this.$comm.errorToShow('请选择辣度属性')
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin-right: 22rpx;
	}
</style>
